<template>
  <div class="form-config-container">
    <a-form layout="vertical">
      <a-form-item :label="'表单名称'">
        <a-input type="text" v-model="data.name"></a-input>
      </a-form-item>

      <a-form-item :label="'表单标识'">
        <a-input type="text" v-model="data.formKey"></a-input>
      </a-form-item>

      <a-form-item :label="'标签对齐方式'">
        <a-radio-group defaultValue="horizontal" v-model="data.labelPosition" buttonStyle="solid">
          <a-radio-button value="horizontal">水平</a-radio-button>
          <a-radio-button value="vertical">垂直</a-radio-button>
          <a-radio-button value="inline">内联</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item :label="'表单标签宽度'">
        <a-input-number v-model="data.labelWidth" :min="0" :max="200" :step="10"></a-input-number>
      </a-form-item>

      <a-form-item :label="'组件尺寸'">
        <a-radio-group defaultValue="default" v-model="data.size" buttonStyle="solid">
          <a-radio-button value="large">大</a-radio-button>
          <a-radio-button value="default">默认</a-radio-button>
          <a-radio-button value="small">小</a-radio-button>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
export default {
  props: ['data']
}
</script>
